// 定义一个名为 CategoryQueryForm 的对象，用作 Vue 组件
const CategoryQueryForm = {
    // 组件名称
    name: 'CategoryQueryForm',
    // 组件模板
    template: `  
   <div>
    <form class="category-query-form" @submit.prevent="onSearch">  
        <div class="form-item"><input v-model="query.categoryName" placeholder="分类名称" type="text" /></div>  
        <div class="form-item"><input v-model="query.description" placeholder="分类描述" type="text" /></div>  
        <div class="form-item">  
            <select v-model="query.status">  
                <option value="">全部状态</option>  
                <option value="1">启用</option>  
                <option value="0">禁用</option>  
            </select>  
        </div>  
        <div>  
            <button class="button-class"  type="submit">查询</button>  
            <button class="button-class" type="button" @click="onReset" >重置</button>  
        </div>  
    </form>  
   </div>
  `,
    // 组件属性
    props: {},
    // 自定义事件
    emits: ['search'],
    // 组件设置函数
    setup(props, { emit }) {
        const query = Vue.ref({
            categoryName: '',
            description: '',
            status: ''
        })

        const onSearch = () => {
            emit('search', {...query.value });
        }

        const onReset = () => {
            query.value = {
                categoryName: '',
                description: '',
                status: ''
            };
            emit('search', {
                categoryName: '',
                description: '',
                status: ''
            }); // 重置时也可自动搜索全部
        }

        // 返回表单数据及方法
        return { query, onSearch, onReset };
    }
};